import { useNavigate, useParams } from "react-router-dom"
import './FilmDetailStyle.sass'
import { useEffect, useRef, useState } from "react"
import { getFilmDetailApi } from "../../api"
import type { FilmList } from "src/api/Type"
import LoadingPage from "../../components/loadingpage/LoadingPage"
import { DownOutlined, LeftOutlined, RightOutlined } from "@ant-design/icons"

function FilmDetail () {

  // #region 变量声明
  const { filmId } = useParams() // 电影id
  const [ film, setFilm ] = useState<FilmList>() // 电影
  const [ loading, setLoading ] = useState(false) // 加载状态
  const [ showTitle, setShowTitle ] = useState(false) // 显示标题
  const navigate = useNavigate() // 路由
  const [ openDes, setOpenDes ] = useState(false) // 展开描述
  // console.log(typeof filmId)
  // #endregion

  // #region 函数
  // 获取电影详情
  const getFilmDetail = useRef(async () => {
    try {
      // id不存在时不执行
      if (!filmId) return
      setLoading(true) // 显示加载中
      const res = await getFilmDetailApi(Number(filmId))
      // console.log(res.data)
      if (res.data.status === 0) {
        // console.log(111)
        setFilm(res.data.data.film)
      }
      setLoading(false) // 隐藏加载中
    } catch (error) {
      console.log(error)
      setLoading(false) // 隐藏加载中
    }
  })
  // 滚动事件
  const scrollHandler = (e: React.UIEvent) => {
    const et = e.target as HTMLDivElement
    // console.log(et.scrollTop)
    setShowTitle(et.scrollTop > 40)
  }
  // #endregion

  // #region Hooks
  // 挂载阶段触发
  useEffect(() => {
    getFilmDetail.current()
  }, [])
  // #endregion

  return (
    <div className="film-detail" onScroll={ scrollHandler }>
      <header className={ showTitle ? 'show' : '' }>
        <LeftOutlined className="back" onClick={ () => navigate('..') } />
        <h3>{ film?.name }</h3>
      </header>
      <div className="img">
        <img src={ film?.poster } />
      </div>
      <div className="film-info">
        <div className="film-title">
          <span>{ film?.name }</span>
          <span className="film-filmType">{ film?.filmType.name }</span>
          <span className="film-grade"><i>{ film?.grade }</i>分</span>
        </div>
        <div className="film-type">{ film?.category.replace(/[|]/g, ' | ') }</div>
        <div className="film-start">{
          film?.premiereAt &&
          new Date(film.premiereAt * 1000).toLocaleDateString('ch-CN', {
            year: 'numeric', month: '2-digit', day: '2-digit'
          }).replace(/\//g, '-') + '上映'
        }</div>
        <div className="film-runtime">{ film?.nation } | { film?.runtime }分钟</div>
        <div className={ openDes ? 'openDes film-des' : 'film-des' }>{ film?.synopsis }</div>
        <div className={ openDes ? 'open film-btn' : 'film-btn' } onClick={ () => setOpenDes(!openDes) }><DownOutlined /></div>
      </div>
      <div className="actor-info">
        <h3>演职人员</h3>
        <ul>
          {
            film?.actors.map((item, index) => (
              <li key={ index }>
                <img src={ item.avatarAddress } />
                <span>{ item.name }</span>
                <em>{ item.role }</em>
              </li>
            ))
          }
        </ul>
      </div>
      <div className="photos-info">
        <h3>剧照 <div>全部({ film?.photos?.length })<RightOutlined /></div></h3>
        <ul>
          {
            film?.photos?.map((item, index) => (
              <li key={ index }><img src={ item } /></li>
            ))
          }
        </ul>
      </div>
      <div className="chose-seat">选座购票</div>
      <LoadingPage loading={ loading } />
    </div>
  )
}

export default FilmDetail
